<template>
  <div ref="chartRef" style="width: 100%; height: 380px"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { useResizeHandler } from "./components/useResizeHandler"; // 修改为你的路径

const chartRef = ref(null);
let chartInstance = null;
const props = defineProps({
  msgData: {
    type: Array,
    default: () => [],
  },
});
const initChart = () => {
  if (!chartRef.value) return;
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption({
    title: { text: "公司年度业绩", left: "center" },
    tooltip: { trigger: "item" },
    legend: { bottom: "0%", left: "center" },
    series: [
      {
        name: "业绩(元)",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "outside",
          formatter: "{b}:({d}%)",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: "bold",
          },
        },
        labelLine: { show: true },
        color: ["#ff6347", "#4682b4"],
        data: props.msgData,
      },
    ],
  });
};

useResizeHandler(() => chartInstance?.resize());

onMounted(() => initChart());
onBeforeUnmount(() => chartInstance?.dispose());
</script>
